<template>
	<view class="hotGroup">
		<uni-mdnav navType="2" :navTabArr="navTabArr" :defaultTab="defaultTab" @navTabClick="navTabClick"></uni-mdnav>
		<!-- <view class="groupTab">
			<uni-tabchange :activeTab="activeTab" :isFixed="true" :tabArr="tabArr"></uni-tabchange>
		</view> -->
		<view class="search flex alignCenter">
			<input class="font14" type="text" placeholder="群/小组名称" v-model.trim="name" placeholder-class="font14 color666" maxlength="10" @confirm="searchClick">
			<text class="font14 bold" @click="searchClick">搜索</text>
		</view>
		<!-- 学习小组的收藏 -->
		<view class="collect" v-if="defaultTab!=0">
			<view class="flex alignCenter justConBetween colTitle">
				<view class="font14 bold">我的收藏</view>
				<view class="colorccc font12 flex alignCenter" @click="seeMore">查看全部<uni-icons class="rightIcon" type="right" size="15" @click="seeMore"></uni-icons></view>
			</view>
			<view class="flex alignCenter">
				<template v-for="(item,index) in colData">
					<view class="schoolItem" v-if="index<=4" :key="index" @click.stop="toDetail(item)">
						<image :src="item.logo" v-if="item.logo" mode=""></image>
						<view class="avatar font14" v-if="!item.logo">{{item.name.substring(0,1)}}</view>
						<view class="font12 color999 hiddenOneline">{{item.name}}</view>
					</view>
				</template>
			</view>
			<uni-nodata v-if="colData.length==0"></uni-nodata>
		</view>
		<!-- 学习组 -->
		<view class="groupList flex justConBetween" v-if="(groupData.length>0 && defaultTab==1)">
			<view class="leftBox">
				<template v-for="(item,index) in groupData">
					<view class="groupOne" :key="index" v-if="index%2==0">
						<uni-mygroup :groupItem="item" :key="index" @groupComOper="groupComOper"></uni-mygroup>
					</view>
				</template>
			</view>
			<view class="rightBox">
				<template v-for="(item,index) in groupData">
					<view class="groupOne" :key="index" v-if="index%2!=0">
						<uni-mygroup :groupItem="item" :key="index" @groupComOper="groupComOper"></uni-mygroup>
					</view>
				</template>
			</view>
		</view>
		<!-- qq群 -->
		<view class="groupList flex justConBetween" v-if="(groupData.length>0 && defaultTab==0)">
			<view class="leftBox">
				<template v-for="(item,index) in groupData">
					<view class="groupOne" :key="index" v-if="index%2==0">
						<view class="groupItem">
							<view class="bg">
								<view class="cover">
									<image :src="item.codeUrl" mode="widthFix"></image>
								</view>
								<view class="bgMain flex alignCenter">
									<view class="flex alignCenter justConBetween smallOper">
										<image src="@/static/image/icons/scan.png" mode="widthFix" @click.stop="showScan(item.codeUrl)"></image>
									</view>
									<view class="qqNum" @click.stop="copyClick(item.userGroupNo)">
										<text class="font14 bold focusMargin">{{item.userGroupNo}}</text>
										<image src="@/static/image/icons/copy.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
							<view class="con font14">
								<view class="title hiddenOneline">{{item.userGroupName}}</view>
								<view class="qqIntro font12 color666 hiddenOneline">{{item.userGroupIntroduction}}</view>
								<view class="tag colorBlue font12 flex alignCenter flexWrap">
									<text>{{item.schoolName}}</text>
									<text>{{item.majorName}}</text>
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
			<view class="rightBox">
				<template v-for="(item,index) in groupData">
					<view class="groupOne" :key="index" v-if="index%2!=0">
						<view class="groupItem">
							<view class="bg">
								<view class="cover">
									<image :src="item.codeUrl" mode="widthFix"></image>
								</view>
								<view class="bgMain flex alignCenter">
									<view class="flex alignCenter justConBetween smallOper">
										<image src="@/static/image/icons/scan.png" mode="widthFix" @click.stop="showScan(item.codeUrl)"></image>
									</view>
									<view class="qqNum" @click.stop="copyClick(item.userGroupNo)">
										<text class="font14 bold focusMargin">{{item.userGroupNo}}</text>
										<image src="@/static/image/icons/copy.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
							<view class="con font14">
								<view class="title hiddenOneline">{{item.userGroupName}}</view>
								<view class="tag colorBlue font12 flex alignCenter flexWrap">
									<text>{{item.schoolName}}</text>
									<text>{{item.majorName}}</text>
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
		<uni-nodata v-if="groupData.length==0"></uni-nodata>
	</view>
</template>

<script>
	import { groupList,allQQList } from "@/api/school.js"
	import { myGroup } from "@/api/mine.js"
	import { previewImg } from "@/utils/common.js"
	export default {
		data() {
			return {
				navTabArr:[{
					title:'qq群',
					navTabVal:0
				},{
					title:'学习组',
					navTabVal:1
				}],
				activeTab:1,
				colArr:[],
				name:'',
				tabArr:[{
					title:'QQ群'
				},{
					title:'小组'
				}],
				groupData:[],
				page:1,
				pageSize:10,
				pageTotal:0,
				colData:[],
				defaultTab:0
			};
		},
		onLoad() {
			if(this.defaultTab==0){
				this.getAllQQList()
			}else{
				this.getList()
			}
			if(!uni.getStorageSync('token')) return;
			if(this.defaultTab==1){
				this.getColList()
			}
		},
		methods:{
			initPage(){
				this.page=1;
				this.groupData=[];
			},
			// 搜索
			searchClick(){
				this.initPage()
				if(this.defaultTab==0){
					this.getAllQQList()
				}else{
					this.getList()
				}
			},
			// 收藏列表
			getColList(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let param={
					page:1,
					size:5,
					myTeamsType:3,// 0:全部; 1:我管理的; 2:我参与的; 3我收藏的
				}
				myGroup(param).then((res)=>{
					uni.hideLoading()
					if(res.code==100000){
						this.colData=res.data.rows
					}
				}).catch((err)=>{uni.hideLoading()})
			},
			getList(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let param={
					page:this.page,
					size:this.pageSize,
					name:this.name,
				}
				groupList(param).then((res)=>{
					if(res.code==100000){
						this.groupData=this.groupData.concat(res.data.rows)
						this.pageTotal=Math.ceil(res.data.total/this.pageSize)
					}
					uni.hideLoading()
				}).catch((err)=>{uni.hideLoading()})
			},
			// qq群
			getAllQQList(){
				let param={
					page:this.page,
					size:this.pageSize,
					name:this.name,
				}
				allQQList(param).then((res)=>{
					if(res.code==100000){
						this.groupData=this.groupData.concat(res.data.rows)
						this.pageTotal=Math.ceil(res.data.total/this.pageSize)
					}
				})
			},
			// 去详情
			toDetail(item){
				uni.navigateTo({
					url:'/pages/send/group/groupDetail/groupDetail?id='+item.id
				})
			},
			seeMore(){
				if(!uni.getStorageSync('token')) return;
				uni.navigateTo({
					url:'/pages/mine/group/group?activeTab=2'
				})
			},
			// 小组组件操作的回调
			groupComOper(obj){
				if(obj.type=='add'){
					this.initPage()
					this.getList()
				}
			},
			navTabClick(item){
				this.defaultTab=item.navTabVal
				this.initPage()
				if(item.navTabVal==0){
					this.getAllQQList()
				}else{
					this.getList()
				}
			},
			copyClick(qq){
				uni.setClipboardData({
					data: qq,
					showToast:false,
					success: ()=> {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
					}
				});
			},
			// 查看qq群二维码
			showScan(url){
				previewImg([url],0)
			}
		},
		onPullDownRefresh() {
			this.initPage()
			if(item.navTabVal==0){
				this.getAllQQList()
			}else{
				this.getList()
			}
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		onReachBottom() {
			if(this.page<this.pageTotal){
				++this.page
				if(this.navTabVal==0){
					this.getAllQQList()
				}else{
					this.getList()
				}
			}else{
				uni.showToast({
					title:'我也是有底线的',
					icon:'none'
				})
			}
		}
	}
</script>
<style lang="scss">
page{
	background: $pageBgColor;
}
</style>
<style lang="scss" scoped>
// @import "@/static/public.scss";
.groupTab{
	::v-deep .tabChange{
		padding: 0 200rpx;
		box-sizing: border-box;
	}
}
.search{
	padding: 30rpx 30rpx 0;
	box-sizing: border-box;
	background: #fff;
	input{
		border:1px solid $bordercolor;
		border-radius: 30rpx;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		flex:1;
		margin:0 20rpx 0 0;
	}
}
.collect{
	padding: 30rpx;
	box-sizing: border-box;
	background: #fff;
	margin-bottom: 20rpx;
	.colTitle{
		margin: 0 0 40rpx 0;
	}
	.rightIcon{
		color:$colorccc !important;
	}
	.schoolBox{
		position: relative;
	}
	.schoolItem{
		text-align: center;
		margin:0 10rpx 0 0;
		flex:1;
		image{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
		.avatar{
			width: 60rpx;
			height: 60rpx;
			text-align: center;
			margin: 0 auto;
			line-height: 60rpx;
			border-radius: 50%;
			background: $colorMain;
		}
	}
	.schoolItem:last-child{
		margin: 0;
	}
}
.groupList{
	flex-wrap: wrap;
	padding: 30rpx;
	box-sizing: border-box;
	background: #fff;
	&>view{
		flex: 0 0 48%;
	}
	.groupOne{
		margin-bottom: 30rpx;
		border-radius:8rpx;
	}
}
.groupItem{
	background: #fff;
	border-radius: 8rpx;
	position: relative;
	.bg{
		position: relative;
		border-radius: 8rpx 8rpx 0 0;
		.cover{
			overflow: hidden;
			&>image{
				width:100%;
				height:100%;
				display: block;
				border-radius: 8rpx 8rpx 0 0;
			}
		}
		.bgMain{
			border-radius: 8rpx 8rpx 0 0;
			position: absolute;
			height: 100%;
			width: 100%;
			top: 0;
			left:0;
			background: rgba(0, 0, 0, .2);
			.qqNum{
				position: absolute;
				bottom: 0;
				left: 0;
				background: linear-gradient(to top,rgba(0, 0, 0, .5) 20%,rgba(0, 0, 0, 0));
				color: #fff;
				text-align: center;
				width: 100%;
				padding: 10rpx 0;
				text{
					display: inline-block;
					vertical-align: middle;
				}
				image{
					width: 50rpx;
					height: 50rpx;
					display: inline-block;
					vertical-align: middle;
				}
			}
		}
		.smallOper{
			position: absolute;
			top:0;
			left:0;
			width: 100%;
			padding: 0 10rpx;
			box-sizing: border-box;
			overflow: hidden;
			image{
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	.con{
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 0 0 8rpx 8rpx;
		border:1px solid $bordercolor;
		.tag{
			margin: 10rpx 0;
			&>text{
				display: inline-block;
				margin:0 10rpx 0 0;
			}
		}
	}
}
</style>
